
import { useState, useMemo } from 'react';
import FormRender from '@/components/FormRender';
import TableList from "./components/TableList";
import { getFormItem } from './config.js';
import { useResize } from '@/hooks/useResize';

const StorageMange = () => {

	const [query, setQuery] = useState({});

	//监听变更
	const { el: headerEl, height: headerHeight } = useResize();

	//表单数据
	const formArr = useMemo(() => {
		return getFormItem();
	}, [])

	//表单渲染组件
	const FormRenderProps = {
		query,
		formArr,
		formConfig: {
			name: 'storage-manage-form',
			style: { marginBottom: '16px' }
		},
		clickSearch(val) {
			setQuery(val);
		},
		clickReset() {
			setQuery({});
		},
	}

	const TableListProps = {
		query,
		headerHeight
	}

	return (
		<>
			<div ref={headerEl}>
				<FormRender {...FormRenderProps} />
			</div>
			<TableList {...TableListProps} />
		</>
	)
}

export default StorageMange;
